<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #aaa{
    white-space: pre-wrap;

    }
#one{
white-space: normal;
}
#two{
    white-space: pre;
}
#three{
    white-space: nowrap;
}
#four{
    white-space: pre-wrap;
}
#five{
    white-space: pre-line;
}
#six{
    white-space: inherit;
    }
</style>
<body>
    <!--    white-space      -->
    <!-- normal	    默认。空白会被浏览器忽略。
         pre	    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
         nowrap	    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
         pre-wrap	保留空白符序列，但是正常地进行换行。
         pre-line	合并空白符序列，但是保留换行符。
         inherit	规定应该从父元素继承 white-space 属性的值。 -->


    <p>
        <!-- normal	    默认。空白会被浏览器忽略。 -->
            <a id="one">这是一些文本      1,这是一个文本         2。</a><br/>

        <!-- pre	    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 -->
            <a id="two">这                              是一些文本。</a><br/>

        <!-- nowrap	    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 -->
            <a id="three">这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4;这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4;这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4。这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4。<br>这是一些文本1,这是一些文本2，这是一些文本3，这是一些文本4。</a><br/>
        
        <!-- pre-wrap	保留空白符序列，但是正常地进行换行。 -->
            <a id="four">这           是                        一                          些                        文                                         本。这           是                        一                          些                        文                                         本。这           是                        一                          些                        文                                         本。这           是                        一                          些                        文                                         本。</a><br/>

        <!-- pre-line	合并空白符序列，但是保留换行符。 -->
            <a id="five">这                                                                                                                                                                                    是一些文本。<br/>这           是                        一                          些                        文                                         本。</a><br/>

        <!-- inherit	规定应该从父元素继承 white-space 属性的值。 --> 
            <p id="aaa">
            <a id="sex">这                                            是一些文本。</a><br/>
            </p>

    </p>

</body>

</html>